<template>
  <div>
    <h1 style="color:black">点餐界面</h1>
    <div class="cards">
      <template class="cards__item" v-for="prop in page.records">
        <el-card :body-style="{ padding: '0px', marginBottom: '1px' }">
          <img
            :src="prop.icon"
            class="image"
            width="250px"
            height="250px"
          />
          <div style="padding: 14px">
            <div class="flex_beween">
              {{ prop.name }}| {{ prop.type }}| {{ prop.price }}元
            </div>
            <div class="bottom card-header flex_beween">
              <el-button type="danger" @click="jian(prop.id)">删除</el-button>
              <el-button type="primary" @click="handleChange(prop.id)">添加</el-button>
            </div>
          </div>
        </el-card>
      </template>
    </div>
    <!-- 分页 -->
    <el-pagination
      class="flex_left"
      background
      layout="prev, pager, next"
      :total="page.total"
      @current-change="handleCurrentChange"
    >
    </el-pagination>
    <el-button class="flex_left" type="primary" @click="open()"
      >购物车</el-button
    >
    <!-- 购物车 -->
    <!-- 弹窗 -->
    <el-dialog title="购物车" :visible.sync="dialogVisible" width="50%">
      <!-- 表格 -->
      <p>总价格：{{sum}}元</p>
      <el-table :data="list" border>
        <el-table-column prop="name" label="菜名" width="180" align="center">
        </el-table-column>
        <el-table-column prop="number" label="数量" width="180" align="center">
        </el-table-column>
        <el-table-column prop="price" label="单价" width="180" align="center">
        </el-table-column>
        <el-table-column label="价格" width="180" align="center">
          <template slot-scope="prop">
              {{prop.row.price * prop.row.number}}元
          </template>
        </el-table-column>
      </el-table>
      <el-button class="flex_left" type="primary" @click="send()"
      >提交</el-button
    >
    </el-dialog>
  </div>
</template>

<script>
import { list, updateRecommend } from "@/util/request/foodApi";
import { create } from "@/util/request/orderApi";
import store from '@/store'

export default {
  name: "OrderMain",
  data() {
    return {
      // 分页数据
      page: {
        records: [],
        total: 1,
        current: 1,
      },

      // 购物车
      shopValue: new Map(),
      shopList: new Map(),
      dialogVisible: false,
      list:[],
      sum: 0,
    };
  },

  methods: {
    // 显示或者搜索菜品
    searchList(val) {
      list({ current: val }).then((res) => {
        if (res.data) {
          this.page = res.data.data;
          for (let i = 0; i < res.data.data.records.length; i++) {
            // 存入购物车中
            if (!this.shopValue.get(res.data.data.records[i].id)) {
              this.shopValue.set(res.data.data.records[i].id, 0);
              this.shopList.set(
                res.data.data.records[i].id,
                res.data.data.records[i]
              );
            }

            this.page.records[i].recommend =
              res.data.data.records[i].recommend == "1" ? true : false;
          }
        }
      });
    },

    // 修改推荐
    changeRecommend(val) {
      updateRecommend(val).then((res) => {
        console.log(res);
      });
      console.log(val);
    },

    // 换页
    handleCurrentChange(val) {
      this.searchList(val);
    },

    // 加入购物车
    handleChange(val) {
      let temp = this.shopValue.get(val);
      this.shopValue.set(val, temp + 1);
      console.log(this.shopValue.get(val));
    },

    // 减少
    jian(val) {
      let temp = this.shopValue.get(val);
      if(temp > 0)
      this.shopValue.set(val, temp - 1);
      console.log(this.shopValue.get(val));
    },

    // 打开购物车
    open() {
      this.list = [];
      this.sum = 0;
      for(let key of this.shopValue.keys()) {
        if(this.shopValue.get(key) != 0)
        {
          console.log(key);
          console.log(this.shopValue.get(key));
          console.log(this.shopList.get(key).name);
          this.list.push({
            foodsId: key,
            number: this.shopValue.get(key),
            name: this.shopList.get(key).name,
            price: this.shopList.get(key).price,
          })
          this.sum += this.shopValue.get(key) * this.shopList.get(key).price;
        }
      }
      this.dialogVisible = true;
    },

    // 发送订单
    send() {
      create({userId:store.state.userInfo.id, orderItems: this.list}).then(res => {
        console.log(res);
      })
      this.dialogVisible = false;
    }
  },

  mounted() {
    this.searchList();
  },
};
</script>

<style>
.cards {
  display: flex;

  /* Put a card in the next row when previous cards take all width */
  flex-wrap: wrap;

  margin-left: -8px;
  margin-right: -8px;
}

.cards__item {
  /* There will be 4 cards per row */
  flex-basis: 25%;

  padding-left: 8px;
  padding-right: 8px;
}

.flex_between {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
  margin-top: 20px;
}
</style>